<script xmlns="http://www.w3.org/1999/html">
export default {
  name: "notice",
  data (){
    return{
      rules:{
        noti:[
          { required: true, message: '请选择开标项目', trigger: 'blur' }
        ],
      },
      ruleForm:{

      },
      date:"",
      xiansi:{
        display:"inline-block"
      },
      fromlist:[
        {Position:"中标人",supplier:"",score:""},
        {Position:"第二候选人",supprlier:"",score:""},
        {Position:"第三候选人",supplier:"",score:""}
      ],
      title:"选择数据",
      flag:false,
      queryParams:{
        pageNum:1,
        pageSize:10
      },
      total: 0,
      activeName: 'second',
      openb:false,
      fala:false,
      title2:"选择供应商"
    }
  },
  methods:{
    xianyin(){
      this.openb=true;
    },
    xunzhe(){
      this.flag=true;
    },
    cz(){
      this.flag=false;
    },
    cancel(){
      this.flag=false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    gys(){
      this.fala=true;
      console.log(this.fala)
    }
  }
}
</script>

<template>
  <div >

    <el-form :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" label-position="top">
      <el-form-item label="开标项目" style="margin-left: 20px"/>
      <el-button icon="el-icon-coin" @click="xunzhe" style="margin-left: 20px;width: 230px" >选择数据</el-button>
      <div style="padding: 10px;background-color: #f5f6f8;margin: 10px 20px">
      <el-descriptions direction="horizontal"  label-class-name="my-label" content-class-name="my-content" :column="1" style="margin: 20px; ">
        <el-descriptions-item label="招投标项目编号" >
          {{}}
        </el-descriptions-item>
        <el-descriptions-item label="项目名称" style="margin: 20px">
          {{}}
        </el-descriptions-item>
        <el-descriptions-item label="招投标需求明细" style="margin: 20px">
          <div>
          <el-table style="width: 800px;" border>
            <el-table-column type="index" align="center"/>
            <el-table-column label="产品编号" align="center"/>
            <el-table-column label="产品名称" align="center"/>
            <el-table-column label="单位" align="center">
              <dict-tag ></dict-tag>
            </el-table-column>
            <el-table-column label="需求数量" align="center"/>
            <el-table-column label="期望到货时间" align="center"/>
          </el-table></div>
        </el-descriptions-item>
        <el-descriptions-item label="采购负责人" style="margin: 20px">
          {{}}
        </el-descriptions-item>
        <el-descriptions-item label="采购联系电话" style="margin: 20px">
          {{}}
        </el-descriptions-item>
      </el-descriptions>
      </div>
      <el-form-item label="开标时间" style="margin-left: 20px"/>
      <el-date-picker
        v-model="date"
        type="datetime"
        placeholder="选择日期时间"
        style="margin-left: 20px;width: 230px">
      </el-date-picker>
      <el-form-item label="被通知的供应商" style="margin-left: 20px"/>
      <div @click="xianyin" style="border: 1px #d7d9dc dashed;height: 70px;width: 900px;text-align: center;margin-left: 20px;line-height: 70px">
        <span :style="xiansi">选择部门</span>
      </div>
      <el-form-item label="开标结果" style="margin-left: 20px"/>
      <el-table :data="fromlist" border style="width: 600px;margin-left: 20px">
        <el-table-column type="index"/>
        <el-table-column label="名次">
          <template slot-scope="scope">
            <el-input v-model="scope.row.Position" />
          </template>
        </el-table-column>
        <el-table-column  label="供应商">
          <template slot-scope="scope">
            <el-input v-model="scope.row.supplier" @click="gys"  placeholder="选择供应商"/>
          </template>
        </el-table-column>
        <el-table-column label="最终得分">
          <template slot-scope="scope">
            <el-input v-model="scope.row.score"/>
          </template>
        </el-table-column>
      </el-table>

    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align: left;margin-top: 100px" >
      <el-button type="primary" >提 交</el-button>
      <el-button >生成草稿</el-button>
<!--      <el-button @click="shux">刷新</el-button>-->
    </div>

<!--    选择数据对话框-->
    <el-dialog :title="title" :visible.sync="flag" width="1000px" append-to-body>
    <span>招投标项目编号</span> <el-input placeholder="输入项目编号">招投标项目编号</el-input> <span>项目名称</span><el-input placeholder="输入项目名称">项目名称</el-input>
      <el-button style="margin-left: 50px">搜索</el-button>
      <el-table  highlight-current-row>
        <el-table-column type="index" />
        <el-table-column label="招投标项目编号" align="center" width="180" />
        <el-table-column label="招投标需求明细" align="center" width="180" >
          <el-table-column label="产品编号" align="center" width="180" >

          </el-table-column>
          <el-table-column label="产品名称" align="center" width="180" >

          </el-table-column>
          <el-table-column label="单位" align="center" width="180" >

          </el-table-column>
          <el-table-column label="需求数量" align="center" width="180" >

          </el-table-column>
          <el-table-column label="期望到货时间" align="center" width="180">

          </el-table-column>
        </el-table-column>
        <el-table-column label="采购负责人"  align="center" width="180"/>
        <el-table-column label="采购联系电话" align="center" width="180"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cz" >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog  :visible.sync="openb" width="400px"  title="部门列表" append-to-body>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="组织架构" name="first">阿里巴巴（中国）软件有限公司</el-tab-pane>
        <el-tab-pane label="当前用户所处部门" name="second">阿里巴巴（中国）软件有限公司</el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog :title="title2" :visible.sync="fala" width="800px" append-to-body>
      <el-form>
        <el-form-item label="供应商名称" >
          <el-input
            placeholder="请输入供应商名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" >重置</el-button>
        </el-form-item>
      </el-form>
      <el-table border style="width: 600px">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="供应商全称"  />

        <el-table-column label="供应商状态" >

        </el-table-column>

        <el-table-column label="供应产品类别" >

        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"

      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
::v-deep .el-table .cell{
  padding: 0px;
}
::v-deep .el-table--medium .el-table__cell{
  padding: 0px;
}
::v-deep .el-input.is-disabled .el-input__inner{
  color: #606266;
}

::v-deep .el-descriptions-item__label:not(.is-bordered-label){
  margin: 0px;
}
::v-deep .el-descriptions-item__label:not(.is-bordered-label){
  margin: 0px;
}
::v-deep .el-descriptions{
  background-color:#f5f6f8;
}
::v-deep .el-descriptions__body{
  background-color:#f5f6f8;
}
::v-deep .el-input{
  width: 300px;
}
</style>
